<template>
  <div v-if="total>0">
    <div class="pagination-container" style="margin-top: 16px; text-align: right;">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 15, 20, 30]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="changeCurrentPage"
          @size-change="changePageSize"/>
    </div>
  </div>
</template>

<script setup>
// ... existing code ...
import {ref} from "vue";

const emit = defineEmits(['query:page']);
// 分页相关参数
const currentPage = ref(1); // 当前页码
const pageSize = ref(10);   // 每页条数
const total = ref(0);       // 总记录数
// 页码改变事件
const changeCurrentPage = (page) => {
  currentPage.value = page;
  emit('query:page');
};
// 每页条数改变事件
const changePageSize = (size) => {
  pageSize.value = size;
  currentPage.value = 1; // 重置为第一页
  emit('query:page');
};
defineExpose({currentPage, pageSize, total});
</script>

<style scoped>
</style>